<template>
  <div id="app">
    <div class="box">
      <div class="showbox"><router-view /></div>
      <div class="navbox">
        <van-tabbar
          v-model="active"
          fixed
          route
          placeholder
          safe-area-inset-bottom
          active-color="#45b7cb"
          inactive-color="#000"
        >
          <van-tabbar-item replace to="/home/index">
            <span>首页</span>
            <template #icon="props">
              <img :src="props.active ? indeximg.active : indeximg.inactive" />
            </template>
          </van-tabbar-item>
          <!-- <van-tabbar-item replace to="/home/follow">
            <span>关注</span>
            <template #icon="props">
              <img
                :src="props.active ? followimg.active : followimg.inactive"
              />
            </template>
          </van-tabbar-item>
          <van-tabbar-item replace to="/home/releaseindex">
            <span>发布</span>
            <template #icon="props">
              <img
                class="bigimg"
                :src="props.active ? sendimg.active : sendimg.inactive"
              />
            </template>
          </van-tabbar-item>
          <van-tabbar-item replace to="/home/chat">
            <span>消息</span>
            <template #icon="props">
              <van-badge
                v-show="unReadCount != 0"
                color="#d43b33"
                max="999"
                :content="unReadCount"
              >
                <img :src="props.active ? chatimg.active : chatimg.inactive" />
              </van-badge>
              <img
                v-show="unReadCount == 0"
                :src="props.active ? chatimg.active : chatimg.inactive"
              />
            </template>
          </van-tabbar-item> -->
          <van-tabbar-item replace to="/home/me">
            <span>我的</span>
            <template #icon="props">
              <img :src="props.active ? meimg.active : meimg.inactive" />
            </template>
          </van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
    <van-popup v-model="showprivacy" :close-on-click-overlay="false">
      <div class="privacy">
        <div>杨婷私人定制程序隐私保护政策</div>
        <div>1.欢迎使用“杨婷的专属程序”，我们非常重视您的个人信息和隐私保护。</div>
        <div>
          2.在您使用“杨婷的专属程序”服务之前，请仔细阅读<span
            >《用户使用协议》</span
          >和<span>《隐私保护政策》</span
          >我们将按照您同意的条款使用您的个人信息，以便为您提供服务。
        </div>
        <div>
          <button @click="close">同意并继续</button>
          <button @click="close">暂不同意</button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getPrivacy, setPrivacy } from "@/utils/auth";
import { _local } from "@/utils/storage";

export default {
  data() {
    return {
      active: 0,
      showprivacy: false,
      indeximg: {
        active: "",
        inactive: "",
      },
      followimg: {
        active: "",
        inactive: "",
      },
      sendimg: {
        active: "",
        inactive: "",
      },
      chatimg: {
        active: "",
        inactive: "",
      },
      meimg: {
        active: "",
        inactive: "",
      },
    };
  },
  computed: {
    ...mapGetters(["unReadCount"]),
  },
  created() {
    this.getUrl();
    const ename = this.detect();
    if (ename === "ios" && !getPrivacy()) {
      this.showprivacy = true;
    } 
    // else if (_local.get("unReadCount")) {
    //   this.unReadCount = _local.get("unReadCount");
    // }
  },
  methods: {
    getUrl() {
      fetch(`https://api.nuanuan.net/index/banner?type=${5}`, {
        method: "GET",
      })
        .then((res) => res.json())
        .then((res) => {
          console.log("底部图标", res);
          this.indeximg.active = res.data[0].url_on;
          this.indeximg.inactive = res.data[0].url;
          this.followimg.active = res.data[1].url_on;
          this.followimg.inactive = res.data[1].url;
          this.sendimg.active = res.data[2].url;
          this.sendimg.inactive = res.data[2].url;
          this.chatimg.active = res.data[3].url_on;
          this.chatimg.inactive = res.data[3].url;
          this.meimg.active = res.data[4].url_on;
          this.meimg.inactive = res.data[4].url;
        });
    },
    detect() {
      let equipmentType = "";
      const agent = navigator.userAgent.toLowerCase();
      const android = agent.indexOf("android");
      const iphone = agent.indexOf("iphone");
      const ipad = agent.indexOf("ipad");
      if (android !== -1) {
        equipmentType = "android";
      }
      if (iphone !== -1 || ipad !== -1) {
        equipmentType = "ios";
      }
      return equipmentType;
    },
    close() {
      this.showprivacy = false;
      setPrivacy(1);
    },
    touse() {
      this.$router.push({ path: "/serve" });
    },
    topre() {
      this.$router.push({ path: "/privacy" });
    },
  },
};
</script>

<style lang="less">
#app {
  .box {
    display: flex;
    flex-direction: column;
    .showbox {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .navbox {
      .van-tabbar {
        border-top: 1px solid #f1f1f1;
        z-index: 1000000;
        user-select: none;
        .bigimg {
          position: relative;
          z-index: 100000000;
          margin-top: -31px;
          width: 50px !important;
          height: 50px !important;
        }
        .van-badge--fixed {
          top: 5px;
          right: 3px;
        }
        .van-tabbar-item__icon {
          font-size: 22px;
          > img {
            width: 22px;
            height: 22px;
            user-select: none;
            pointer-events: none;
          }
        }
      }
    }
  }
  .van-popup {
    border-radius: 15px;
    z-index: 100000000 !important;
  }
  .van-overlay {
    z-index: 100000000 !important;
  }
  .privacy {
    width: 300px;
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    color: rgba(128, 128, 128, 0.774);
    & > div:nth-child(1) {
      text-align: center;
      margin: 20px 0;
      font-weight: bold;
      color: #000;
      font-size: 16px;
    }
    & > div:nth-child(2) {
      margin-bottom: 20px;
    }
    & > div:nth-child(3) {
      margin-bottom: 20px;
      & > span {
        color: #46b8cb;
      }
    }
    & > div > button {
      width: 250px;
      display: block;
      margin: auto;
      border: 0;
      padding: 10px;
      box-sizing: border-box;
      &:nth-child(1) {
        background-color: #46b8cb;
        color: #fff;
      }
      &:nth-child(2) {
        background-color: #fff;
      }
    }
  }
}
</style>
